<template>
  <div class="test-container">
    <div class="top-main">
      <search :listQuery="listQuery" :path="$route.name"></search>
    </div>
    <div class="bottom-main">
      <div class="list-button-group">
        <div class="button-item">
          <el-button type="primary" icon="el-icon-plus" @click="add">
            新增
          </el-button>
        </div>
        <!-- <div class="button-item">
          <el-button type="success" :disabled="selectrow.length != 1" icon="el-icon-s-check" @click="useqrcode">
            二维码生成
          </el-button>
        </div> -->
        <!-- <div class="button-item">
          <el-button type="primary" :disabled="selectrow.length == 0" icon="el-icon-document-checked" @click="uploadDB">
            上传调拨单文件
          </el-button>
        </div> -->
        <div class="button-item">
          <el-button type="primary" :disabled="selectrow.length != 1" v-print="printObj" @click="print"
            icon="el-icon-printer">
            打印
          </el-button>
        </div>
      </div>
      <div class="table-list">
        <el-table ref="tableSort" :data="list" :element-loading-text="elementLoadingText"
          @selection-change="setSelectRows" highlight-current-row height="100%" :header-cell-style="{
            'border-bottom': '1px solid #cbcccd',
            'border-top': '1px solid #cbcccd',
          }">
          <el-table-column show-overflow-tooltip type="selection" width="55" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip label="序号" width="95">
            <template #default="scope">
              {{ scope.$index + listQuery.pageSize * (listQuery.pageIndex - 1) + 1 }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="pingzhengh" label="调拨单号" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip label="状态" prop="zhuangtai" align="center">
            <template #default="scope">
              {{ $util.getCkdbdZt(scope.row.zhuangtai) }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="主管单位" prop="zhuguandwmc" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip label="物资区分" prop="wuziqfmc" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip label="物资分类" prop="wuzizymc" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip label="发货单位" prop="fahuodw" align="center"></el-table-column>
          <!-- <el-table-column show-overflow-tooltip label="保障时效" prop="baozhangsx" align="center"></el-table-column> -->
          <el-table-column show-overflow-tooltip label="经办人" prop="jingbanr" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip label="创建时间" prop="create_time" width="200"
            align="center"></el-table-column>
          <el-table-column show-overflow-tooltip label="最后修改时间" prop="modify_time" width="200"
            align="center"></el-table-column>
          <el-table-column show-overflow-tooltip label="操作" fixed="right" align="center" min-width="280">
            <template #default="{ row }">
              <el-button type="text" @click="showdetail(row)">明细</el-button>
              <el-button type="text" @click="uploadDB(row)">上传附件</el-button>
              <el-button type="text" :disabled="['0', '2'].includes(row.zhuangtai) ? false : true"
                @click="examine(row)">
                提交审核
              </el-button>
              <el-button type="text" :disabled="['0', '2'].includes(row.zhuangtai) ? false : true"
                @click="edit(row)">编辑</el-button>
              <el-button type="text" :disabled="['0', '2', '5'].includes(row.zhuangtai) ? false : true"
                @click="deleteDBD(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination :background="background" :current-page="listQuery.pageIndex" :layout="layout"
        :page-size="listQuery.pageSize" :total="total" @current-change="handleCurrentChange"
        @size-change="handleSizeChange"></el-pagination>
    </div>
    <page-1-add v-if="addshow" :gobacktitle="gobacktitle" :datarow="gobacktitle == '新增' ? {} : editData"></page-1-add>
    <accept v-if="acceptshow" :gobacktitle="gobacktitle" :datarow="selectrow[0]"></accept>
    <detail v-if="detailshow" :gobacktitle="gobacktitle" :datarow="detailrow"></detail>
    <!-- 导入文件start -->
    <el-dialog :close-on-click-modal="false" :visible.sync="importShow" v-if="importShow == true" destroy-on-close
      title="导入文件" class="m-dialog" :append-to-body="true">
      <upload api-url="/chukudbd/importChukudbd" :rowid="filerow.id" @success="uploadSuccess" />
    </el-dialog>
    <div style="height: 0;">
      <div id="print-content">
        <div class="print-top">
          <h2>出库调拨单</h2>
          <p class="print-time">{{ printTime }}</p>
        </div>
        <table border="1" width="100%" align="center" cellpadding="0" cellspacing="0">
          <thead>
            <tr align="center" valign="center" height="36">
              <th :colspan="2">调拨单号</th>
              <th>物资区分</th>
              <th>物资分类</th>
              <th>接收单位</th>
              <th>发货单位</th>
              <th>经办人</th>
              <th :colspan="2">创建时间</th>
            </tr>
          </thead>
          <tbody>
            <tr align="center" valign="center" height="36">
              <td :colspan="2">{{ printrow.pingzhengh }}</td>
              <td>{{ printrow.wuziqfmc }}</td>
              <td>{{ printrow.wuzizymc }}</td>
              <td>{{ printrow.jieshoudwmc }}</td>
              <td>{{ printrow.fahuodw }}</td>
              <td>{{ printrow.jingbanr }}</td>
              <td :colspan="2">{{ printrow.create_time }}</td>
            </tr>
          </tbody>
          <thead>
            <tr align="center" valign="center" height="36">
              <th>序号</th>
              <th>品名</th>
              <th>品牌</th>
              <th>规格型号</th>
              <th>单位</th>
              <th>需求数量</th>
              <th>单价(元)</th>
              <th>小计(元)</th>
              <th>合计</th>
              <th>备注</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in printrow.chukudbdmxList" :key="index" align="center" valign="center"
              height="36">
              <td>{{ index + 1 }}</td>
              <td nowrap>{{ item.wuzimc }}</td>
              <td>{{ item.shengchancj }}</td>
              <td>{{ item.guigexh }}</td>
              <td>{{ item.jiliangdw }}</td>
              <td>{{ item.wuzisl }}</td>
              <td>{{ item.cankaojg }}</td>
              <td>{{ Number(item.wuzisl) * Number(item.cankaojg) }}</td>
              <td v-if="index == 0" rowspan="2">{{ printrow.heji }}</td>
              <td>{{ item.beizhu }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <el-dialog title="二维码" :visible.sync="dialogVisible" width="300px">
      <div class="ercode">
        <p>当前信息二维码：</p>
        <canvas id="canvas" ref="canvas"></canvas>
      </div>
    </el-dialog>

  </div>
</template>
<script>
let _listQuery = {
  pageIndex: 1,
  pageSize: 20,
  pingzhengh: '',
  wuziqfid: '',
  zhuguandwid: '',
  jingbanr: '',
  zhuangtai: '',
  create_time: ''
}
import {
  QueryChukudbdPage,
  DelChukudbd,
  CkdbdSh,
  GetChukudbdPageByid
} from '@/api/exwarehouse'
import Upload from './components/upload'
import search from './components/search.vue'
import Page1Add from './components/page1Add.vue'
import Accept from '../components/page1Accept.vue'
import Detail from './components/page1Detail.vue'
import QRCode from "qrcode"
export default {
  name: 'Test',
  data() {
    return {
      listQuery: Object.assign({}, _listQuery),
      show: true,
      listLoading: true,
      total: 0,
      elementLoadingText: '正在加载...',
      list: [],
      layout: 'prev, pager, next, jumper',
      background: true,
      addshow: false,
      acceptshow: false,
      detailshow: false,
      importShow: false,
      dialogVisible: false,
      gobacktitle: '',
      selectrow: [],
      detailrow: {},
      filerow: {},
      editData: {},
      printrow: {},
      printObj: {
        id: 'print-content',
        popTitle: '打印',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        beforeOpenCallback(vue) {
          vue.printLoading = true
        },
        openCallback(vue) {
          vue.printLoading = false
        },
        closeCallback(vue) {
          console.log('关闭了打印工具')
        }
      },
      printTime: '',
    }
  },
  components: { Upload, search, Page1Add, Accept, Detail },
  created() {
    this.fetchData()
  },
  mounted() { },
  methods: {
    //生成二维码
    useqrcode() {
      this.dialogVisible = true
      this.$nextTick(() => {
        QRCode.toCanvas(this.$refs.canvas, this.selectrow[0].id, { width: 200, height: 200 }, function (error) {
          if (error) {
            console.error(error);
          } else {
            console.log("success!");
          }
        });
      })
      // var canvas = document.getElementByld("canvas");
      // 调用函数去生成二维码，参数依次为：二维码的容器、要生成的内容、回调函数

    },
    //打印
    print() {
      let time = new Date()
      this.printTime = time.toLocaleString()
    },
    setSelectRows(val) {
      this.selectrow = val
      this.getCkdByid()
    },
    async getCkdByid() {
      let { data } = await GetChukudbdPageByid({ id: this.selectrow[0].id })
      this.printrow = data
      let heji = 0
      data.chukudbdmxList.forEach((item) => {
        if (!item.cankaojg) return
        heji += parseInt(item.wuzisl) * parseInt(item.cankaojg)
      })
      this.printrow.heji = heji
    },
    async fetchData() {
      let { data } = await QueryChukudbdPage(this.listQuery)
      this.list = data.rows
      this.total = data.total
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.listQuery.pageIndex = val
      this.fetchData()
    },
    add() {
      this.addshow = true
      this.gobacktitle = '新增'
    },
    edit(row) {
      this.addshow = true
      this.editData = row
      this.gobacktitle = '编辑'
    },
    accept() {
      this.acceptshow = true
      this.gobacktitle = '入库验收'
    },
    showdetail(row) {
      this.detailshow = true
      this.gobacktitle = '出库调拨单明细'
      this.detailrow = row
    },
    uploadSuccess() {
      this.importShow = false
    },
    uploadDB(row) {
      this.filerow = row
      this.importShow = true
    },
    searchDbd() {
      this.listQuery.pageIndex = 1
      this.fetchData()
    },
    resetlist() {
      this.listQuery = Object.assign({}, _listQuery)
      this.fetchData()
    },
    deleteDBD(row) {
      // if (this.selectrow.length == 0) {
      //   this.$message({
      //     message: '请先勾选数据，再进行一键删除操作',
      //     type: 'warning',
      //   });
      //   return
      // }
      this.$baseConfirm('你确定要删除当前项吗', null, async () => {
        const { msg } = await DelChukudbd({ id: row.id })
        this.$baseMessage('删除成功', 'success')
        this.fetchData()
      })
      // this.$confirm('确认删除选中的数据吗？', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning',
      // }).then(() => {
      //   this.selectrow.forEach(async (item) => {
      //     let data = await DelChukudbd(item)
      //   })
      //   this.fetchData()
      //   this.$message({
      //     message: '删除成功',
      //     type: 'success',
      //   })

      // })
    },
    async examine(row) {
      this.$confirm('确认审核当前选中的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        let datarow = {
          id: row.id,
          zhuangtai: 1
        }
        let { data } = await CkdbdSh(datarow)
        this.fetchData()
        this.$message({
          message: '审核成功',
          type: 'success',
        })
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.test-container {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  background: #f6f8f9 !important;
  height: 100%;

  .top-main {
    width: 100%;
    background: #fff;
    padding: 10px 0;
  }

  .bottom-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    background-color: #fff;
    margin-top: 10px;
    padding-bottom: 10px;

    .list-button-group {
      display: flex;
      flex-direction: row;
      padding: 20px;

      .button-item {
        padding: 0px 10px;
      }

      .button-item:first-child,
      &:last-child {
        padding: 0px 10px 0 0;
      }
    }

    .table-list {
      flex: 1;
      padding: 0 20px 20px;
    }
  }

  .el-button {
    font-size: .14rem !important;
  }
}

.ercode {
  text-align: center;
}

#print-content {
  padding: 20px;

  .print-top {
    text-align: center;

    h2 {
      text-decoration: underline;
      margin: 0 !important;
    }
  }

  .print-time {
    float: right;
    color: #000;
    font-size: 16px;
  }

  table {
    font-size: 14px;
    background-color: #f0f2f5;
    border-collapse: collapse;
    color: #454545;
    table-layout: auto;
    width: 100%;
    text-align: center;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #dadcde;

    thead {
      border-top-width: 1px;
      border-top-style: solid;
      border-top-color: #dadcde;
      line-height: 40px;
      font-weight: bold;
      color: #454c70;
    }

    tr {
      border-top-width: 1px;
      border-top-style: solid;
      border-top-color: #dadcde;
      line-height: 23px;
    }

    td {
      padding: 5px;
      font-size: 14px;
      // width: 100px;
      word-break: break-all; // 元素换行
    }

    // // 斑马纹效果stripe
    // tr:nth-child(even) {
    //   background: #F5F7F9;
    // }

    // tr:nth-child(odd) {
    //   background: #FFF;
    // }
  }
}
</style>
